body{
    margin: 0px;
    height: 800px;
    background: radial-gradient(rgba(57, 57, 57, 0.8),rgba(0, 0, 0, 1));
    display: flex;
    justify-content: center;
    align-items: center;
    /*横向和纵向的居中*/
    /*gradients渐变线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
    语法background: linear-gradient(direction, color-stop1, color-stop2, ...);    
    例子： background: linear-gradient(red, blue); /* 标准的语法 
    从左上角到右下角的线性渐变： background: linear-gradient(to bottom right, red , blue);  标准的语法 
    指定角度的话：background: linear-gradient(180deg, red, blue); /* 标准的语法 
    使用透明度：  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法
    重复渐变色：background: repeating-linear-gradient(red, yellow 10%, green 20%);
  
    径向渐变（Radial Gradients）- 由它们的中心定义
    颜色结点均匀分布的径向渐变：background:radial-gradient(red,green,blue)
    颜色结点不均匀分布的径向渐变：background:radial-gradient(red5%,green15%,blue60%);
    形状为圆形的径向渐变：默认情况下是椭圆形的ellipse example background:radial-gradient(circle,red,yellow,green)
    重复的渐变色：background: repeating-radial-gradient(red, yellow 10%, green 15%);
    渐变色的范围进行设定：径向渐变 - 不同尺寸大小关键字的使用
     background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
      background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}
#one{
    width:1022px;
    height:494px;
    border: 25px solid #333333;
    border-top: 25px solid #333333;
    box-shadow: 0 0 20px gainsboro;
    border-radius: 20px;
    background-image: url(img/gangqinjian.png);
    display: flex;
    }
      #one>div{
        flex-grow:1;}
    div:active{
     
        background: linear-gradient( rgba(255, 255,255, 0),rgba(255, 255,255, 0),rgba(190, 190,190, 0.45));
    }
    
